<template>
  <el-container>
    <el-aside
      width="300px"
      style="
        border-style: groove;
        border-width: 2px;
        margin-bottom: 20px;
        height: 500px;
        margin-right: 50px;
      "
    >
      <el-tree
        ref="RoleTree"
        style="max-width: 600px"
        :data="Roledata"
        node-key="id"
        :props="defaultProps"
        :default-expanded-keys="[3]"
        @node-click="GetMenusId"
        highlight-current="true"
      />
    </el-aside>

    <el-aside
      width="300px"
      style="display: flex; flex-direction: column; height: 500px"
    >
      <div
        style="
          border-style: groove;
          border-width: 2px;
          margin-bottom: 20px;
          margin-right: 50px;
          flex: 1;
          overflow-y: auto;
        "
      >
        <el-tree
          ref="MenusTree"
          style="max-width: 600px"
          :data="Menusdata"
          show-checkbox
          node-key="id"
          :props="defaultProps"
          :default-expanded-keys="[3]"
          highlight-current="true"
        />
      </div>
      <div style="padding: 10px 0">
        <el-button size="large" @click="AddRoleMenus">保存</el-button>
      </div>
    </el-aside>
  </el-container>
</template>

<script lang="ts" setup>
import { ElMessage, type ElTree } from "element-plus";
import { nextTick, onMounted, ref } from "vue";
import axios from "axios";
import { readB } from "@/http/axiosHelper";

const form = ref({
  rId: 1,
  mId: "",
});

const AddRoleMenus = () => {
  /*  let array1 = MenusTree.value?.getHalfCheckedNodes() || []; */
  const list = MenusTree.value?.getCheckedKeys(false) || [];
  /*     const array2 = (array1.map((item: any) => Number(item.id))) */

  // 合并所有需要保存的节点ID
  /*   const allSelectedKeys = [...new Set([...list])]; */

  form.value.mId = list.toString();

  readB.post("/api/RoleMenus/AddRoleMenus", form.value).then((res) => {
    if (res.data.code == 200) {
      ElMessage.success(res.data.msg);
    } else {
      ElMessage.error(res.data.msg);
    }
  });
};

const defaultProps = {
  children: "children",
  label: "label",
};
const Roledata = ref([
  {
    label: "角色",
    children: [],
  },
]);
const Menusdata = ref([
  {
    id: 0,
    label: "权限菜单",
    children: [],
  },
]);

var RoleTree = ref<InstanceType<typeof ElTree>>();
var MenusTree = ref<InstanceType<typeof ElTree>>();

const GetRole = () => {
  readB.get("/api/RoleMenus/GetRole").then((res) => {
    Roledata.value[0].children = res.data.data;
  });
};
const GetMenus = () => {
  readB.get("/api/RoleMenus/GetMenus").then((res) => {
    Menusdata.value[0].children = res.data.data;
  });
};

//通过角色Id 获取菜单Id
const GetMenusId = (data: any) => {
  form.value.rId = data.id;
  readB
    .get("/api/RoleMenus/RoleIdGetMenusid", {
      params: {
        RId: form.value.rId,
      },
    })
    .then((res) => {
      MenusTree.value?.setCheckedKeys(res.data.data, true);
    });
};

onMounted(() => [GetRole(), GetMenus()]);
</script>
